/**
 * 主页面JavaScript - 智能测试用例生成系统
 * 
 * 本文件提供了智能测试用例生成系统主页面的完整交互功能，包括问题分析、
 * 测试用例生成、用户认证、数据导出等核心功能。
 * 
 * 主要功能：
 * - 问题分析：智能分析编程问题并生成测试用例
 * - 测试用例生成：基于语义分析生成多种类型的测试用例
 * - 用户认证：登录状态管理和用户权限控制
 * - 数据导出：支持多种格式的结果导出
 * - 统计信息：系统使用统计和性能指标
 * - 示例问题：提供预设的示例问题供用户测试
 * - 数据保存：将生成的测试用例保存到数据库
 * 
 * 技术特点：
 * - 异步数据处理：使用fetch API进行HTTP请求
 * - 实时状态更新：动态更新UI状态和用户信息
 * - 机器学习集成：支持ML模型辅助问题分析
 * - 响应式设计：适配不同屏幕尺寸
 * - 用户体验优化：加载状态、平滑滚动、错误处理
 * - 模块化设计：功能模块清晰分离
 * 
 * 页面结构：
 * - 问题输入区域：文本输入框和参数设置
 * - 分析结果区域：语义分析和测试用例展示
 * - 用户认证区域：登录状态和用户信息
 * - 操作按钮区域：导出、保存、统计等功能
 * - 导航栏：滚动效果和用户交互
 * 
 * API接口：
 * - POST /api/analyze：问题分析和测试用例生成
 * - POST /api/export：结果导出
 * - GET /api/statistics：获取统计信息
 * - GET /api/samples：获取示例问题
 * - GET /api/check-login：检查登录状态
 * - POST /api/logout：用户登出
 * - POST /api/save-generated-test-cases：保存生成的测试用例
 * 
 * 使用场景：
 * - 教师生成编程题测试用例
 * - 学生练习编程问题
 * - 自动化测试用例生成
 * - 编程教学辅助工具
 * 
 * 依赖关系：
 * - HTML：index.html页面结构
 * - CSS：main.css样式文件
 * - API：后端RESTful接口
 * - Bootstrap：UI组件库
 * - Font Awesome：图标库
 */

// ==================== 全局变量定义 ====================

/**
 * 全局状态变量
 * 用于管理页面的状态和数据
 */
let currentResult = null;        // 当前分析结果，存储最新的分析数据
let isLoggedIn = false;         // 登录状态，标识用户是否已登录
let currentUser = null;         // 当前用户信息，存储登录用户的数据

// ==================== 页面初始化 ====================

/**
 * 页面加载完成后初始化
 * 
 * DOMContentLoaded事件处理器，负责页面的初始化工作。
 * 采用分阶段加载策略，优先处理关键功能，然后加载非关键资源。
 * 
 * 初始化流程:
 * 1. 立即设置初始状态（未登录）
 * 2. 检查实际的登录状态
 * 3. 延迟加载其他功能
 * 
 * 性能优化:
 * - 关键功能优先初始化
 * - 非关键功能延迟加载
 * - 避免阻塞页面渲染
 */
document.addEventListener('DOMContentLoaded', function() {
    // 立即设置初始状态（未登录）
    isLoggedIn = false;
    currentUser = null;
    updateLoginUI();
    
    // 然后检查实际的登录状态
    checkLoginStatus();
    
    // 延迟加载其他功能
    setTimeout(function() {
        initializeApp();
    }, 100);
});

// ==================== 应用初始化 ====================

/**
 * 加载外部脚本
 * 
 * 动态加载Bootstrap JavaScript库。
 * 使用异步加载避免阻塞页面渲染。
 * 
 * 加载内容:
 * - Bootstrap 5.1.3 JavaScript库
 * - 提供模态框、下拉菜单等交互功能
 */
function loadExternalScripts() {
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js';
    script.async = true;
    document.head.appendChild(script);
}

/**
 * 初始化应用
 * 
 * 应用的主要初始化函数，负责设置各种功能模块。
 * 包括事件监听器、导航栏效果和示例问题加载。
 * 
 * 初始化内容:
 * - 事件监听器设置
 * - 导航栏滚动效果
 * - 示例问题异步加载
 * 
 * 错误处理:
 * - 示例问题加载失败的处理
 * - 不影响其他功能的初始化
 */
function initializeApp() {
    initializeEventListeners();
    initializeNavbarScroll();
    // 异步加载示例问题，不阻塞其他初始化
    loadSampleProblems().catch(error => {
        console.error('加载示例问题失败:', error);
    });
}

/**
 * 初始化导航栏滚动效果
 * 
 * 为导航栏添加滚动时的样式变化效果。
 * 当页面滚动超过50px时，导航栏会添加"scrolled"类。
 * 
 * 功能特点:
 * - 响应式滚动效果
 * - 平滑的视觉过渡
 * - 性能优化的滚动监听
 */
function initializeNavbarScroll() {
    const navbar = document.querySelector('.navbar-modern');
    if (navbar) {
        window.addEventListener('scroll', function() {
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
    }
}

/**
 * 初始化事件监听器
 * 
 * 为页面上的各种交互元素绑定事件处理器。
 * 包括表单提交、按钮点击、数据加载等。
 * 
 * 绑定的事件:
 * - 分析表单提交
 * - 导出按钮点击
 * - 统计信息加载
 * - 示例问题加载
 * - 测试用例保存
 */
function initializeEventListeners() {
    const analysisForm = document.getElementById('analysisForm');
    if (analysisForm) {
        analysisForm.addEventListener('submit', handleAnalysis);
    }
    
    // 导出按钮
    const exportButtons = ['exportJson', 'exportPython', 'exportMarkdown'];
    exportButtons.forEach(id => {
        const btn = document.getElementById(id);
        if (btn) {
            btn.addEventListener('click', () => exportResult(id.replace('export', '').toLowerCase()));
        }
    });
    
    // 统计信息加载
    const loadStatsBtn = document.getElementById('loadStatistics');
    if (loadStatsBtn) {
        loadStatsBtn.addEventListener('click', loadStatistics);
    }
    
    // 加载示例按钮
    const loadSampleBtn = document.getElementById('loadSample');
    if (loadSampleBtn) {
        loadSampleBtn.addEventListener('click', loadSampleProblem);
    }
    
    // 保存当前测试用例按钮
    const saveCurrentBtn = document.getElementById('saveCurrentTestCases');
    if (saveCurrentBtn) {
        saveCurrentBtn.addEventListener('click', saveCurrentTestCases);
    }
}

// ==================== 问题分析处理 ====================

/**
 * 处理分析请求
 * 
 * 处理用户提交的问题分析请求，包括数据验证、API调用和结果展示。
 * 支持机器学习模型辅助分析，提供完整的错误处理。
 * 
 * 处理流程:
 * 1. 获取表单数据
 * 2. 验证输入数据
 * 3. 显示加载状态
 * 4. 调用分析API
 * 5. 处理响应结果
 * 6. 更新UI状态
 * 
 * 参数说明:
 * - problemText: 问题描述文本
 * - testCaseCount: 测试用例数量
 * - useML: 是否使用机器学习模型
 * 
 * 错误处理:
 * - 输入验证失败
 * - API请求失败
 * - 响应数据错误
 */
async function handleAnalysis(e) {
    e.preventDefault();
    
    const problemText = document.getElementById('problemText').value.trim();
    const testCaseCount = parseInt(document.getElementById('testCaseCount').value);
    const useML = document.getElementById('useML').checked;
    
    if (!problemText) {
        alert('请输入问题描述');
        return;
    }
    
    // 显示加载状态
    showLoading(true);
    hideResult();
    
    try {
        const response = await fetch('/api/analyze', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                problem_text: problemText,
                test_case_count: testCaseCount,
                use_ml: useML
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            currentResult = data;
            displayResult(data);
        } else {
            alert('分析失败: ' + data.error);
        }
    } catch (error) {
        alert('请求失败: ' + error.message);
    } finally {
        showLoading(false);
    }
}

/**
 * 显示分析结果
 * 
 * 将分析结果以结构化的方式展示给用户。
 * 包括语义分析信息和生成的测试用例。
 * 
 * 显示内容:
 * - 问题类型识别
 * - 约束条件统计
 * - 测试用例数量
 * - 分析置信度
 * - 测试用例列表
 * 
 * 用户体验:
 * - 平滑滚动到结果区域
 * - 清晰的信息展示
 * - 响应式布局
 * 
 * @param {Object} result - 分析结果数据
 */
function displayResult(result) {
    const analysis = result.semantic_analysis;
    const testCases = result.test_cases;
    
    // 更新基本信息
    document.getElementById('problemType').textContent = analysis.operation || '未知';
    document.getElementById('constraintCount').textContent = 
        Object.values(analysis.constraints || {}).reduce((sum, arr) => sum + arr.length, 0);
    document.getElementById('testCaseCountResult').textContent = testCases.length;
    
    // 更新置信度
    const confidence = Math.round((analysis.confidence || 0.85) * 100);
    document.getElementById('confidenceText').textContent = confidence + '%';
    
    // 显示测试用例
    displayTestCases(testCases);
    
    // 显示结果区域
    document.getElementById('analysisResult').style.display = 'block';
    
    // 滚动到结果区域
    document.getElementById('analysisResult').scrollIntoView({ 
        behavior: 'smooth', 
        block: 'start' 
    });
}

/**
 * 显示测试用例
 * 
 * 将生成的测试用例以卡片形式展示给用户。
 * 支持分页显示，避免页面过长。
 * 
 * 显示特点:
 * - 最多显示10个测试用例
 * - 包含测试用例描述、类型、输入输出
 * - 超过10个时显示剩余数量提示
 * - 现代化的卡片设计
 * 
 * @param {Array} testCases - 测试用例数组
 */
function displayTestCases(testCases) {
    const container = document.getElementById('testCasesList');
    container.innerHTML = '';
    
    testCases.slice(0, 10).forEach((testCase, index) => {
        const div = document.createElement('div');
        div.className = 'test-case-item-modern';
        div.innerHTML = `
            <div class="d-flex justify-content-between align-items-start mb-2">
                <h6 class="test-case-title mb-0">测试用例 ${index + 1}: ${testCase.description}</h6>
                <span class="test-case-badge">${testCase.type}</span>
            </div>
            <div class="test-case-content">
                <p class="mb-1"><strong>输入:</strong> <code>${JSON.stringify(testCase.input)}</code></p>
                ${testCase.expected_output !== null ? 
                    `<p class="mb-0"><strong>预期输出:</strong> <code>${JSON.stringify(testCase.expected_output)}</code></p>` : 
                    ''
                }
            </div>
        `;
        container.appendChild(div);
    });
    
    if (testCases.length > 10) {
        const moreDiv = document.createElement('div');
        moreDiv.className = 'text-center mt-3';
        moreDiv.innerHTML = `<small class="text-muted">还有 ${testCases.length - 10} 个测试用例...</small>`;
        container.appendChild(moreDiv);
    }
}

// ==================== 数据操作和导出 ====================

/**
 * 导出结果
 * 
 * 将当前分析结果导出为指定格式的文件。
 * 支持多种导出格式，包括JSON、Python、Markdown等。
 * 
 * 导出流程:
 * 1. 检查是否有可导出的结果
 * 2. 调用导出API
 * 3. 处理响应结果
 * 4. 下载生成的文件
 * 
 * 支持格式:
 * - json: JSON格式
 * - python: Python代码格式
 * - markdown: Markdown文档格式
 * 
 * @param {string} format - 导出格式
 */
async function exportResult(format) {
    if (!currentResult) {
        alert('没有可导出的结果');
        return;
    }
    
    try {
        const response = await fetch('/api/export', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                result: currentResult,
                format: format
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            // 下载文件
            window.open(`/api/download/${data.filename}`, '_blank');
        } else {
            alert('导出失败: ' + data.error);
        }
    } catch (error) {
        alert('导出失败: ' + error.message);
    }
}

/**
 * 加载统计信息
 * 
 * 从服务器获取系统使用统计信息。
 * 包括分析次数、成功率、测试用例生成数量等指标。
 * 
 * 统计指标:
 * - 总分析次数
 * - 成功分析次数
 * - 成功率
 * - 总生成测试用例数
 * 
 * 错误处理:
 * - 网络请求失败
 * - 服务器响应错误
 * - 用户友好的错误提示
 */
async function loadStatistics() {
    try {
        const response = await fetch('/api/statistics');
        const data = await response.json();
        
        if (data.success) {
            displayStatistics(data.statistics);
        } else {
            alert('加载统计信息失败: ' + data.error);
        }
    } catch (error) {
        alert('请求失败: ' + error.message);
    }
}

/**
 * 显示统计信息
 * 
 * 将统计信息以卡片形式展示给用户。
 * 使用响应式布局，适配不同屏幕尺寸。
 * 
 * 显示内容:
 * - 总分析次数（蓝色）
 * - 成功分析次数（绿色）
 * - 成功率（信息色）
 * - 总生成测试用例（警告色）
 * 
 * 设计特点:
 * - 响应式网格布局
 * - 颜色编码的统计卡片
 * - 清晰的数字和标签
 * 
 * @param {Object} stats - 统计信息对象
 */
function displayStatistics(stats) {
    const container = document.getElementById('statisticsContent');
    container.innerHTML = `
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-number text-primary">${stats.total_analyses || 0}</div>
                <div class="stat-label">总分析次数</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-number text-success">${stats.successful_analyses || 0}</div>
                <div class="stat-label">成功分析次数</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-number text-info">${(stats.success_rate || 0).toFixed(1)}%</div>
                <div class="stat-label">成功率</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stat-card">
                <div class="stat-number text-warning">${stats.total_test_cases_generated || 0}</div>
                <div class="stat-label">总生成测试用例</div>
            </div>
        </div>
    `;
}

/**
 * 加载示例问题
 * 
 * 从预设的示例问题中随机选择一个，填充到问题输入框。
 * 帮助用户快速体验系统功能。
 * 
 * 示例问题类型:
 * - 数学运算：整数加法
 * - 字符串处理：字符串反转
 * - 数学计算：平方运算
 * 
 * 功能特点:
 * - 随机选择示例
 * - 自动填充输入框
 * - 涵盖不同问题类型
 */
function loadSampleProblem() {
    const sampleProblems = [
        "编写一个程序，输入两个整数a和b，输出它们的和。其中a和b的范围在-100到100之间。",
        "现在有一个字符串 str，你需要对它从后往在原地进行逆转。输入格式：一个只包含大小写字母，长度小于 1000 的字符串。输出格式：逆转后的字符串。",
        "编写一个程序，输入一个整数n，输出n的平方。其中n的范围在-1000到1000之间。"
    ];
    
    const randomProblem = sampleProblems[Math.floor(Math.random() * sampleProblems.length)];
    document.getElementById('problemText').value = randomProblem;
}

/**
 * 加载示例问题列表
 * 
 * 从服务器获取更多的示例问题。
 * 用于扩展示例问题库，提供更多样化的问题类型。
 * 
 * 功能特点:
 * - 异步加载示例问题
 * - 错误处理和日志记录
 * - 不影响页面其他功能
 * 
 * 错误处理:
 * - 网络请求失败
 * - 服务器响应错误
 * - 控制台错误日志
 */
async function loadSampleProblems() {
    try {
        const response = await fetch('/api/samples');
        const data = await response.json();
        
        if (data.success) {
            console.log('示例问题加载成功:', data.samples);
        }
    } catch (error) {
        console.error('加载示例问题失败:', error);
    }
}

// ==================== 用户认证管理 ====================

/**
 * 检查登录状态
 * 
 * 从服务器获取当前用户的登录状态和用户信息。
 * 用于页面初始化时确定用户的认证状态。
 * 
 * 功能特点:
 * - 异步检查登录状态
 * - 更新全局用户状态
 * - 自动更新UI界面
 * - 错误处理和降级
 * 
 * 错误处理:
 * - 网络请求失败
 * - 服务器响应错误
 * - 默认设置为未登录状态
 */
async function checkLoginStatus() {
    try {
        const response = await fetch('/api/check-login');
        const data = await response.json();
        
        if (data.success) {
            isLoggedIn = data.is_logged_in;
            currentUser = data.user;
            // 更新UI状态
            updateLoginUI();
        }
    } catch (error) {
        console.error('检查登录状态失败:', error);
        isLoggedIn = false;
    }
}

/**
 * 更新登录相关的UI状态
 * 
 * 根据用户的登录状态动态更新页面UI元素。
 * 包括用户信息显示、按钮状态、功能可用性等。
 * 
 * 更新内容:
 * - 用户信息区域显示/隐藏
 * - 登录按钮显示/隐藏
 * - 保存按钮状态和文本
 * - 用户名显示
 * 
 * UI状态:
 * - 已登录：显示用户信息，启用保存功能
 * - 未登录：隐藏用户信息，禁用保存功能
 */
function updateLoginUI() {
    const saveBtn = document.getElementById('saveCurrentTestCases');
    const userInfo = document.getElementById('userInfo');
    const loginBtn = document.getElementById('loginBtn');
    
    if (isLoggedIn) {
        // 显示用户信息，隐藏登录按钮
        if (userInfo) {
            userInfo.style.display = 'block';
        }
        if (loginBtn) {
            loginBtn.style.display = 'none';
        }
        
        // 更新保存按钮
        if (saveBtn) {
            saveBtn.innerHTML = '<i class="fas fa-save me-2"></i>保存测试用例';
            saveBtn.classList.remove('btn-secondary');
            saveBtn.classList.add('btn-primary');
        }
        
        // 更新用户名显示
        const userDisplayName = document.getElementById('userDisplayName');
        if (userDisplayName && currentUser) {
            userDisplayName.textContent = currentUser.real_name || currentUser.username;
        }
    } else {
        // 隐藏用户信息，显示登录按钮
        if (userInfo) {
            userInfo.style.display = 'none';
        }
        if (loginBtn) {
            loginBtn.style.display = 'block';
        }
        
        // 更新保存按钮
        if (saveBtn) {
            saveBtn.innerHTML = '<i class="fas fa-save me-2"></i>保存测试用例 (需登录)';
            saveBtn.classList.remove('btn-primary');
            saveBtn.classList.add('btn-secondary');
        }
    }
}

// ==================== 测试用例保存和用户交互 ====================

/**
 * 保存当前测试用例
 * 
 * 将当前生成的分析结果和测试用例保存到数据库。
 * 需要用户登录才能执行保存操作。
 * 
 * 保存流程:
 * 1. 检查是否有可保存的测试用例
 * 2. 验证用户登录状态
 * 3. 调用保存API
 * 4. 处理保存结果
 * 5. 跳转到管理页面
 * 
 * 权限控制:
 * - 未登录用户：显示登录提示
 * - 已登录用户：直接保存
 * 
 * 错误处理:
 * - 无测试用例数据
 * - 登录状态失效
 * - 保存操作失败
 */
async function saveCurrentTestCases() {
    if (!currentResult || !currentResult.test_cases) {
        alert('没有可保存的测试用例');
        return;
    }

    // 检查登录状态
    if (!isLoggedIn) {
        showLoginPromptModal();
        return;
    }

    // 已登录，执行保存操作
    try {
        const response = await fetch('/api/save-generated-test-cases', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(currentResult)
        });

        const data = await response.json();
        
        if (data.success) {
            alert('测试用例保存成功！');
            // 跳转到测试用例管理页面
            window.location.href = '/teacher';
        } else {
            if (data.require_login) {
                // 需要登录，显示登录提示
                showLoginPromptModal();
            } else {
                alert('保存失败：' + data.error);
            }
        }
    } catch (error) {
        console.error('保存测试用例失败:', error);
        alert('保存失败，请稍后重试');
    }
}

// ==================== 模态框和页面交互 ====================

/**
 * 显示登录提示模态框
 * 
 * 当未登录用户尝试保存测试用例时，显示登录提示模态框。
 * 引导用户进行登录操作。
 */
function showLoginPromptModal() {
    const modal = document.getElementById('loginPromptModal');
    if (modal) {
        modal.style.display = 'flex';
    }
}

/**
 * 关闭登录提示模态框
 * 
 * 关闭登录提示模态框，恢复页面正常状态。
 */
function closeLoginPromptModal() {
    const modal = document.getElementById('loginPromptModal');
    if (modal) {
        modal.style.display = 'none';
    }
}

/**
 * 前往登录页面
 * 
 * 关闭模态框并跳转到登录页面。
 * 为用户提供便捷的登录入口。
 */
function goToLogin() {
    closeLoginPromptModal();
    window.location.href = '/login';
}

/**
 * 登出功能
 * 
 * 处理用户登出操作，清除本地状态并更新UI。
 * 包括服务器端登出和客户端状态清理。
 * 
 * 登出流程:
 * 1. 调用服务器登出API
 * 2. 清除本地用户状态
 * 3. 更新UI界面
 * 4. 刷新页面
 * 
 * 错误处理:
 * - 网络请求失败
 * - 服务器响应错误
 * - 用户友好的错误提示
 */
async function logout() {
    try {
        const response = await fetch('/api/logout', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            // 清除本地状态
            isLoggedIn = false;
            currentUser = null;
            
            // 更新UI
            updateLoginUI();
            
            // 显示成功消息
            alert('已退出登录');
            
            // 刷新页面
            window.location.reload();
        } else {
            alert('退出登录失败');
        }
    } catch (error) {
        console.error('退出登录失败:', error);
        alert('退出登录失败，请稍后重试');
    }
}

// ==================== UI状态管理 ====================

/**
 * 显示/隐藏加载状态
 * 
 * 控制页面加载状态的显示和隐藏。
 * 在API请求期间提供视觉反馈。
 * 
 * @param {boolean} show - 是否显示加载状态
 */
function showLoading(show) {
    const loadingSection = document.getElementById('loadingSection');
    if (loadingSection) {
        loadingSection.style.display = show ? 'block' : 'none';
    }
}

/**
 * 隐藏结果
 * 
 * 隐藏分析结果区域。
 * 在开始新的分析时调用，确保界面清洁。
 */
function hideResult() {
    const resultSection = document.getElementById('analysisResult');
    if (resultSection) {
        resultSection.style.display = 'none';
    }
}

// ==================== 页面交互增强 ====================

/**
 * 平滑滚动到锚点
 * 
 * 为页面中的所有锚点链接添加平滑滚动效果。
 * 提升用户体验，使页面导航更加流畅。
 * 
 * 功能特点:
 * - 自动检测锚点链接
 * - 平滑滚动动画
 * - 防止默认跳转行为
 * - 支持所有页面锚点
 */
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});
